<template>
  <div class="chart-box" ref="pieCharts_2"></div>
</template>

<script>
import resize from '../mixins/resize'

export default {
  name: "EchartBar",
  mixins: [resize],
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      chart: null,
    }
  },
  watch: {
    data: {
      deep: true,
      handler: function (val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$refs.pieCharts_2)
      this.setOptions(this.data)
    },
    setOptions({xdata = [], data = []}) {
      if (!this.chart) {
        return false
      }
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross"
          },
          backgroundColor: "rgba(0,0,0,0.8)", //设置背景图片 rgba格式
          color: "white",
          borderWidth: "1", //边框宽度设置1
          borderColor: "gray", //设置边框颜色
          textStyle: {
            color: "#FFFFFF", //设置文字颜色
          },
        },
        grid: {
          top: '8%',
          left: "4%",
          right: "8%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xdata,
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "12px",
              },
              formatter: function (value) {
                if (value.length > 5) {
                  let newValue = value.substring(0, 5)
                  let ret = ''// 拼接加\n返回的类目项
                  let maxLength = 3// 每项显示文字个数
                  let valLength = newValue.length// X轴类目项的文字个数
                  let rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
                  if (rowN > 1) { // 如果类目项的文字大于3,
                    for (let i = 0; i < rowN; i++) {
                      let temp = ''// 每次截取的字符串
                      let start = i * maxLength// 开始截取的位置
                      let end = start + maxLength// 结束截取的位置
                      // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                      temp = newValue.substring(start, end)
                      if (i === 0) {
                        temp += '\n'
                      }
                      ret += temp // 凭借最终的字符串
                    }
                    return ret + '...'
                  } else {
                    return newValue + '...'
                  }
                } else {
                  return value
                }
              }
            },
            axisLine: {
              show: false, //隐藏x轴线
            },
            axisTick: {
              show: false, //隐藏x轴刻度
            },
          },
        ],
        yAxis: {
          type: "value",
          // name: "百分比（%）",
          nameTextStyle: {
            color: "#537099",
          },
          axisLabel: {
            color: "#5C7AA6",
          },
          //线
          axisLine: {
            lineStyle: {
              color: "#1A365F",
            },
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "#1A365F",
            },
            show: false,
          },
          min: 0,
          max: 100
        },
        series: [
          {
            name: "使用率（%）：",
            type: "bar",
            barWidth: "20%",
            data: data,
          },
        ],
      })
    }
  }
}
</script>

<style scoped lang="less">
  .chart-box {
    width: 100%;
    height: 100%;
  }
</style>